<template>
    <div class="search-box" :style="{
        boxShadow: `var(${getCssVarName('')})`,
    }">
        <el-input v-model="searchData.name" placeholder="请输入姓名" style="width: 240px;" size="large"></el-input>
        <el-input v-model="searchData.name" placeholder="请输入姓名" style="width: 240px;" size="large"></el-input>
        <el-input v-model="searchData.name" placeholder="请输入姓名" style="width: 240px;" size="large"></el-input>
        <el-input v-model="searchData.name" placeholder="请输入姓名" style="width: 240px;" size="large"></el-input>
        <el-input v-model="searchData.name" placeholder="请输入姓名" style="width: 240px;" size="large"></el-input>
        <el-input v-model="searchData.name" placeholder="请输入姓名" style="width: 240px;" size="large"></el-input>

        <el-input v-model="searchData.age" placeholder="请输入年龄" style="width: 240px;" size="large"></el-input>
        <el-select v-model="searchData.sex" placeholder="请选择性别" style="width: 240px;" size="large">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
        </el-select>
    </div>
    <div class="home-view-box">
        <div class="create-box">
            <el-button type="primary">创建</el-button>
            <el-button type="danger">删除</el-button>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
        <div class="pagination-box">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
    </div>
</template>
  
<script  setup>
import { ref, shallowRef } from 'vue';
const searchData = ref({
    name: '',
    age: '',
    sex: ''
})
const tableData = shallowRef([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
const getCssVarName = (type) => {
    return `--el-box-shadow${type ? '-' : ''}${type}`
}

</script>
<style lang="scss" scoped>
.search-box {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    margin-bottom: 20px;

    &>div {
        margin-right: 20px;
    }

}

.home-view-box {
    padding: 0 20px;

    &>div {
        margin-bottom: 20px;

    }
}


.pagination-box {
    display: flex;
    justify-content: right;
}
</style>